<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.img_url" width="100%" height="100%" />
      </van-swipe-item>
    </van-swipe>

    <van-row>
      <van-col span="8"
        ><van-icon name="checked" color="#8b0000" />30天无忧退货</van-col
      >
      <van-col span="8"
        ><van-icon name="checked" color="#8b0000" />48小时快速退费</van-col
      >
      <van-col span="8"
        ><van-icon name="checked" color="#8b0000" />满88元免邮费</van-col
      >
    </van-row>

    <ul class="productinfo">
      <li>
        <h2>{{ info.name }}</h2>
      </li>
      <li>
        <h3>{{ info.goods_brief }}</h3>
      </li>
      <li>
        <span>&yen; {{ info.retail_price }} 元</span>
      </li>
    </ul>
    <ul class="attribute">
      <p>商品参数</p>
      <li v-for="item in attribute" :key="item.id">
        <div class="left">{{ item.name }}</div>
        <div class="van-ellipsis right">{{ item.value }}</div>
      </li>
    </ul>
    <div class="goods_desc" v-html="info.goods_desc" style="width: 100%"></div>
    <ul class="changjian">
      <div class="title">———<span>常见问题</span>———</div>
      <li v-for="item in issue" :key="item.id">
        <h3><span></span>{{ item.question }}</h3>
        <p>{{ item.answer }}</p>
      </li>
      <div class="title">———<span>相关商品</span>———</div>
      <Product :goodsListApply="goodsList"/>
    </ul>
  </div>
</template>

<script>
import Product from "../components/home/Product.vue";
import { ProductDetailsApi,toProductApi } from "../request/api";
export default {
  components:{
    Product
  },
  data() {
    return {
      //轮播图数据
      banner: [],
      //商品基本信息
      info: [],
      //商品参数
      attribute: "",
      //常见问题
      issue: "",
      //相关商品
      goodsList:""
    };
  },
  created() {
    ProductDetailsApi({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res);
      let { gallery, info, attribute, issue } = res.data.data;
      this.banner = gallery;
      this.info = info;
      this.attribute = attribute;
      this.issue = issue;
    });
    // console.log(this.issue)
    toProductApi({
        id:this.$route.query.id
    }).then(res=>{
      console.log(res);
      let {goodsList}= res.data.data
      this.goodsList=goodsList
    })
  },
};
</script>
 
<style lang = "less" scoped>
@import url("../assets/css/common.less");
.home {
  background-color: #ccc;
}
.my-swipe .van-swipe-item {
  /* height: calc(414 * 100vh / 750); */
  height: 100%;
  img {
    vertical-align: bottom;
  }
}
.van-row {
  background-color: #ddd;
  padding: 0.05rem;
  text-align: center;
  font-size: 0.12rem;
}
.van-icon {
  transform: translateX(-0.05rem);
}
.productinfo {
  background-color: rgb(255, 255, 255);
  text-align: center;
  li {
    line-height: 0.4rem;
    h2 {
      font-size: 0.18rem;
    }
    h3 {
      font-size: 0.16rem;
    }
    span {
      font-size: 0.14rem;
      color: @red;
    }
  }
}
.attribute {
  padding: 0.1rem;
  background-color: white;
  p {
    padding: 0.1rem;
    font-size: 0.2rem;
  }
  li {
    line-height: 0.2rem;
    font-size: 0.14rem;
    display: flex;
    height: 0.2rem;
    border-radius: 0.1rem;
    background-color: #eee;
    padding: 0.05rem 0;
    margin-bottom: 0.05rem;
    .left {
      width: 30%;
      text-align: right;
      color: #bbb;

      padding-right: 0.08rem;
    }
    .right {
      color: #666;
      width: 70%;
    }
  }
}
.changjian {
  text-align: center;
  padding: 0.1rem;
  margin-top: 0.1rem;
  background-color: white;

  .title {
    font-size: 0.2rem;
    padding: 0.1rem;

    span {
      padding: 0 0.2rem;
      font-size: 0.18rem;
    }
  }
  li {
    text-align: left;

    h3 {
      display: flex;
      align-items: center;

      padding: 0.15rem 0;

      span {
        background-color: @red;
        width: 0.03rem;
        height: 0.03rem;
        border-radius: 50%;
        margin: 0 0.05rem;
        color: #666;
      }
    }
    p {
      color: rgb(112, 112, 112);
      font-size: 0.14rem;
      padding-left: 0.15rem;
    }
  }
}
/deep/.goods_desc {
  img {
    max-width: 100%;
    display: block;
  }
}
</style>